<style>
.source_name{width:20%;}
td.source_name{text-align:left;}
div.row div.position_block{border:1px solid #eee;display:block;width:150px;font-size:12px;margin:5px 10px;text-align:center;padding:10px;float:left;}
div.row div.position_block:hover{background:#F5F9FD;}
#hidden-position{display: none;}
</style>
<div class="row">
<a href="{:U('Ad/index')}"><button type="button" class="btn btn-primary  active">广告位</button></a>
<a href="{:U('Ad/adlist')}"><button type="button" class="btn btn-primary">所有广告</button></a>
<a href="{:U('Ad/mobile_ad')}"><button type="button" class="btn btn-primary">手机广告</button></a>

</div>

<h3>手机广告</h3>
<form class="form-horizontal" method="post" action="{:U('Ad/mobile_ad')}" id="mobile_ad_form">
	<div class="form-group">
		<div class="col-sm-6">
			<input type="text" name="name" id="name" value="" placeholder="请输入广告名称" class="form-control"/>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-6">
			<select name="position" class="form-control" id="mobile_ad_position">
				<option value="0">手机广告位置选择</option>
				<option value="global_top">global_top</option>
				<option value="global_bottom">global_bottom</option>
				<option value="global_footer">global_footer</option>
				<option value="detail_top">detail_top</option>
				<option value="detail_bottom">detail_bottom</option>
			</select>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-6">
			<textarea name="code" rows="3" class="form-control" placeholder="广告代码"></textarea>
		</div>
	</div>
	<input type="button" value="提交广告" class="btn btn-success" id="mobile_ad_btn"/>
</form>

<hr />

<div class="row" style="margin-top:30px;">
	<!-- 广告位 -->
	<div class="col-xs-4">	
		<div class="position_block">
			<img alt="" src="__PUBLIC__/Admin/img/ad_headerbanner.gif">
			<br/>
			<a href="#" class="add_ad" data-type="global" data-position="1">全局  顶部广告</a>
		</div>
	</div>
	<div class="col-xs-4">	
		<div class="position_block">
			<img alt="" src="__PUBLIC__/Admin/img/ad_footerbanner.gif">
			<br/>
			<a href="#" class="add_ad"  data-type="global" data-position="2">全局  底部广告</a>
		</div>
	</div>
	
	<div class="col-xs-4">	
		<div class="position_block">
			<img alt="" src="__PUBLIC__/Admin/img/ad_nav.gif">
			<br/>
			<a href="#" class="add_ad"  data-type="nav" data-position="1">全局  导航栏广告</a>
		</div>
	</div>
	
	<div class="col-xs-4">	
		<div class="position_block">
			<img alt="" src="__PUBLIC__/Admin/img/ad_threadlist.gif">
			<br/>
			<a href="#" class="add_ad"  data-type="index" data-position="1">首页 通栏广告</a>
		</div>
	</div>
	
	
	<div class="col-xs-4">			
		<div class="position_block">
			<img alt="" src="__PUBLIC__/Admin/img/ad_left.gif">
			<br/>
			<a href="#" class="add_ad" data-type="detail" data-position="1">详情  左侧广告</a>
		</div>
	</div>
	<div class="col-xs-4">	
		<div class="position_block">
			<img alt="" src="__PUBLIC__/Admin/img/ad_threadlist.gif">
			<br/>
			<a href="#" class="add_ad"  data-type="detail" data-position="2">详情  通栏广告</a>
		</div>
	</div>
	
	<div class="col-xs-4">
		<div class="position_block">
			<img alt="" src="__PUBLIC__/Admin/img/ad_nav_left.png">
			<br/>
			<a href="#" class="add_ad"   data-type="common" data-position="1">普通 左侧广告</a>
		</div>
	</div>

	<div class="col-xs-4">	
		<div class="position_block">
			<img alt="" src="__PUBLIC__/Admin/img/ad_search.gif">
			<br/>
			<a href="#" class="add_ad"  data-type="so" data-position="1">搜索 右侧广告</a>
		</div>
	</div>
	
</div>





<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
      	<div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
         </div>
         <div class="modal-body">
         <!-- 
         common :video,music
          -->
			<form class="form-horizontal" role="form">
			   <div class="form-group">
			      <label for="firstname" class="col-sm-2 control-label">广告名称</label>
			      <div class="col-sm-10">
			         <input type="text" class="form-control reset" name="name" id="name" placeholder="请输入广告名称">
			      </div>
			   </div>
			   <div class="form-group">
			      <label for="lastname" class="col-sm-2 control-label">广告代码</label>
			      <div class="col-sm-10">
			        	<textarea id="code" name="code" class="form-control reset" rows="3"></textarea>
			      </div>
			   </div>
			    <div class="form-group">
			      <label for="lastname" class="col-sm-2 control-label">起止时间</label>
			      <div class="col-sm-5">
			        	<input type="text" name="start_time" class="form-control reset" id="start_time">
			      </div>
			      <div class="col-sm-5">
			        	<input type="text" name="end_time"   class="form-control reset" id="end_time">
			      </div>
			   </div>
			   <div class="form-group" id="hidden-position" style="display: none;">
			      <label for="position" class="col-sm-2 control-label">广告位置</label>
			      <div class="col-sm-10">
			      	<select name="position" class="form-control reset" id="position">
			      		<option value="1" selected="selected">通栏1</option>
			      		<option value="2">通栏2</option>
			      		<option value="3">通栏3</option>
			      		<option value="4">通栏4</option>
			      	</select>
			      	<p class="help-block">首页通栏广告,位置由下到上从通栏1到通栏4</p>
			      </div>
			   </div>
			   
			   
			   <!--<input type="hidden" name="position" class="form-control reset" id="position">-->
			   <input type="hidden" name="type" class="form-control reset" id="type">
			   
			</form>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default close_modal" data-dismiss="modal">关闭
            </button>
            <button type="button" id="add_ad_btn" class="btn btn-primary">添加</button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/datepicker/jquery.datetimepicker.css"/ >
<script src="__PUBLIC__/datepicker/jquery.datetimepicker.js"></script>
<script>
$(function(){
	$('#start_time,#end_time').datetimepicker({
		lang:'ch',
	});
	$(".add_ad").click(function(){
		var type=$(this).attr('data-type');//广告类型
		if (type=='index') {
			$('#hidden-position').show();
		}else{
			$('#hidden-position').hide();
//			$("#position").value('1');
		}
		var position=$(this).attr('data-position');
		var title=$(this).text();
		$("#position").val(position);
		$("#type").val(type);
		$("#myModalLabel").text(title);
		$('#myModal').modal('show');
	});
	$("#add_ad_btn").click(function(){
//		if($("#name").val()=='' || $("#type").val()=='' || $("#start_time").val()=='' || $("#end_time").val()==''){
//			alert('广告名称、广告代码、起止时间均是必填项，请填写完毕。');
//		}else{
		var data = $("form").serialize();
		$.post("{:U('Ad/index')}",data,function(d){
			if(d==1){
				alert('恭喜您，广告添加成功！');
				$('.reset').val('');
				location.reload();
			}else{
				alert('广告添加失败，请重试！');
			}
		});
//		}
	});
	
	$("#mobile_ad_btn").click(function(){
		if ($("#mobile_ad_position").val()==0) {
			alert('请选择广告位置。');
			return false;
		} else{
			$("#mobile_ad_form").submit();
		}
	});
	
	$('.close_modal').click(function(){
		$('.reset').val('');
	});
	
});

</script>
